<template>
  <div>
    <router-view v-if="isRedirect"></router-view>
    <a-card
      :bordered="false"
      v-else
    >
      <div class="warp">
        <div class="left">
          <a-menu
            style="width: 100px"
            :default-selected-keys="[currentMenuKey]"
            @click="handleClickMenu"
          >
            <a-menu-item key="1">
              项目信息
            </a-menu-item>
            <a-menu-item key="2">
              项目成员
            </a-menu-item>
            <a-menu-item key="3">
              验收记录
            </a-menu-item>
            <a-menu-item key="4">
              支付记录
            </a-menu-item>
          </a-menu>
        </div>
        <div class="right">
          <div
            v-show="currentMenuKey === '1'"
            class="top"
          >
            <p>项目名称：{{ projectInfo.projectName }}</p>
            <p>项目状态：
              <a-badge
                :status="projectInfo.projectStatus | status('projectStatus', 'status')"
                :text="projectInfo.projectStatus | status('projectStatus', 'text')"
              />
            </p>
            <p>项目编号：{{ projectInfo.projectId }}</p>
            <p>项目预算：￥{{ projectInfo.budgetLow | formatMoney }} ~ ￥{{ projectInfo.budgetHigh | formatMoney }}</p>
            <p>推送范围：{{ pushTypes[projectInfo.pushType] }}</p>
            <p>创建时间：{{ projectInfo.createdDate | moment }}</p>
            <p>项目描述：{{ projectInfo.projectDesc }}</p>
            <p>项目附件：
              <template v-if="projectInfo.projectAttachment">
                <a
                  title="点击下载"
                  @click="downloadAttachment(projectInfo.projectAttachment)"
                >
                  <a-icon type="file" />
                </a>
              </template>
              <span v-else>无</span>
            </p>
            <p>合同文件：<a
              v-if="projectInfo.contractScanCopy"
              :href="uploadedUrlPrefix + projectInfo.contractScanCopy"
              type="primary"
              target="_blank"
            >合同链接，点击打开</a>
            <a
              v-else
              type="primary"
            >暂无合同文件</a>
            </p>
          </div>
          <div
            v-show="currentMenuKey === '2'"
            class="middle"
          >
            <a-tabs
              default-active-key="1"
              :animated="false"
            >
              <a-tab-pane
                key="1"
                tab="项目成员"
              >
                <a-table
                  :columns="memberColumns"
                  :data-source="projectInfo.projectMembers"
                  rowKey="idcardNum"
                  :pagination="false"
                >
                  <template
                    slot="operation"
                    slot-scope="text, record"
                  >
                    <a
                      href="javascript: void (0);"
                      @click="handleDetail(record)"
                    > 详情 </a>
                    |
                    <a
                      href="javascript: void (0);"
                      @click="handleOpenSignInfoModal(record)"
                    > 签约信息 </a>
                  </template>
                  <span
                    slot="money"
                    slot-scope="text"
                  >
                    <span>￥{{ text | formatMoney }} </span>
                  </span>
                  <span
                    slot="status"
                    slot-scope="text"
                  >
                    <a-badge
                      :status="text | status('checkStatus', 'status')"
                      :text="text | status('checkStatus', 'text')"
                    />
                  </span>

                </a-table>
              </a-tab-pane>
              <!-- <a-tab-pane key="2" tab="申请者" force-render>
                <a-table :columns="memberColumns" :data-source="applicants" rowKey="idcardNum" :pagination="false">
                  <template slot="operation" slot-scope="text, record">
                    <a href="javascript: void (0);" @click="handleDetail(record)"> 详情 </a>
                  </template>
                  <span slot="money" slot-scope="text">
                    <span>{{ text | formatMoney }} </span>
                  </span>
                  <span slot="status" slot-scope="text">
                    {{ text ? '申请中' : '进行中' }}
                  </span>
                </a-table>
              </a-tab-pane> -->
            </a-tabs>
            <a-modal
              v-model="membersModalVisible"
              title="项目成员"
              :footer="false"
              @cancel="hideMembers"
              width="1000px"
            >
              <members-table
                :data="membersList"
                :loading="membersLoading"
              />
            </a-modal>
          </div>
          <div
            v-show="currentMenuKey === '3'"
            class="bottom"
          >
            <a-tabs
              default-active-key="1"
              :animated="false"
            >
              <a-tab-pane
                key="1"
                tab="验收记录"
              >
                <a-table
                  :columns="acceptanceColumns"
                  :data-source="records"
                  rowKey="reportId"
                  :pagination="false"
                >
                  <span
                    slot="money"
                    slot-scope="text"
                  >
                    ￥{{ text | formatMoney }}
                  </span>
                  <span
                    slot="membersAction"
                    slot-scope="text, record"
                  >
                    <template>
                      <a @click="showMembers(record)">点击查看</a>
                    </template>
                  </span>
                  <span
                    v-if="text"
                    slot="file"
                    slot-scope="text"
                  >
                    <a
                      title="点击下载"
                      @click="downloadAttachment(text)"
                    >
                      <a-icon type="file" />
                    </a>
                  </span>
                  <span v-else>
                    无
                  </span>
                  <template
                    slot="operation"
                    slot-scope="text, record"
                  >
                    <a
                      href="javascript: void (0);"
                      @click="handleAcceptance(record)"
                    > 验收 </a>
                    <a-divider type="vertical" />
                    <a
                      href="javascript: void (0);"
                      @click="handleDetail(record)"
                    > 详情 </a>
                    <a-divider type="vertical" />
                    <a
                      href="javascript: void (0);"
                      @click="handleEdit(record)"
                    > 编辑 </a>
                    <a-divider type="vertical" />
                    <a
                      href="javascript: void (0);"
                      @click="handleDelete(record)"
                    > 删除 </a>
                  </template>
                  <span
                    slot="status"
                    slot-scope="text"
                  >
                    {{ text ? '申请中' : '进行中' }}
                  </span>
                </a-table>
              </a-tab-pane>
            </a-tabs>
          </div>
          <div
            v-show="currentMenuKey === '4'"
            class="bottom"
          >
            <a-tabs
              default-active-key="1"
              :animated="false"
            >
              <a-tab-pane
                key="1"
                tab="支付记录"
              >
                <a-table
                  :columns="businessColumns"
                  :data-source="businessList"
                  :rowKey="(record, index)=> index"
                  :pagination="false"
                >
                  <span
                    slot="action"
                    slot-scope="text, record"
                  >
                    <template>

                      <a
                        v-if="record.invoiceNum"
                        @click="handleOpenAddBillModal(record)">发票</a>
                      <a
                        v-else
                        @click="handleOpenAddBillModal(record)">添加发票</a>
                      <a-divider type="vertical" />
                      <a @click="handleOpenPaymentDetailModel(record)">详情</a>
                    </template>
                  </span>
                </a-table>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </div>
    </a-card>
    <applicant-modal
      ref="applicantModal"
      :detail="rowApplicant"
      :loading="loadingMembersDetail"
    />
    <batch-detail-modal
      ref="batchDetailModal"
      @orderAction="handleOpenOrderDetailModal"
    />
    <add-bill-modal
      @onSuccess="onAddBillSuccess"
      ref="addBillModal"
    />
    <order-detail-modal ref="orderDetailModal" />
    <sign-info-modal ref="signInfoModal" @onSuccess="onUpdateSignStatusSuccess" />
  </div>
</template>

<script>
import { getServers } from '@/api/manage'
import MembersTable from './members-table'
import { projectDetail } from './setting'
import BatchDetailModal from './components/BatchDetailModal'
import AddBillModal from './components/AddBillModal'
import { getProjectDetail, getProjectReports, getProjectApplicant, getProjectApplicantTrace,getBusinessList } from '@/api/manage'
import ApplicantModal from './applicant-modal'
import { downloadAttachment } from '@/utils/util'
import OrderDetailModal from './components/OrderDetailModal'
import SignInfoModal from './components/SignInfoModal'
import config from '@/config/defaultSettings'
export default {
  name: 'Detail',
  components: {
    ApplicantModal,
    MembersTable,
    BatchDetailModal,
    AddBillModal,
    OrderDetailModal,
    SignInfoModal
  },
  data() {
    const { member, acceptance,business } = projectDetail
    return {
      uploadedUrlPrefix: config.uploadedUrlPrefix,
      rowDetail: {},
      membersList: [],
      membersLoading: false,
      membersModalVisible: false,

      isRedirect: false,
      memberColumns: member.columns,
      acceptanceColumns: acceptance.columns,
      businessColumns:business.columns,
      data: [],
      projectInfo: {},
      records: [],
      applicants: [],
      businessList:[],
      projectId: '',
      rowApplicant: {},
      loadingMembersDetail: false,
      currentMenuKey: '1',
      fileList: [],
      pushTypes: {
        1: '全部',
        2: '条件',
        3: '定向'
      }
    }
  },
  mounted() {
    this.$route.name === 'ProjectApplicant' && (this.isRedirect = true)
    if (this.$route.params.projectId) {
      this.projectId = this.$route.params.projectId
      this.loadProjectDetail(this.projectId)
      this.loadProjectReports(this.projectId)
      this.loadBusinessList(this.projectId)
      // this.loadProjectApplicant(this.projectId)
    } else {
      this.$message.info('请先选择项目')
      this.$router.push({
        name: 'ProjectList'
      })
    }
  },
  methods: {
    handleOpenSignInfoModal(user) {
      this.$refs.signInfoModal.show(user.individualUserId)
    },
    onUpdateSignStatusSuccess() {
      // this.$message.success('签约合同置为无效成功')
      // this.$message.success('签约合同置为无效成功')
      this.$refs.table.refresh()
    },
    handleOpenOrderDetailModal(projectId, individualUserId) {
      this.$refs.orderDetailModal.show(projectId, individualUserId)
    },
    onAddBillSuccess(){
      this.$message.success('处理成功')
      this.$refs.table.refresh()
    },
    handleOpenPaymentDetailModel(record) {
      this.$refs.batchDetailModal.show(record)
    },
    handleOpenAddBillModal(record) {
      console.log(record)
      this.$refs.addBillModal.show(record)
    },
    downloadAttachment,
    showMembers(record) {
      this.membersModalVisible = true
      console.log(record)
      this.getMembers(record.reportId)
    },
    hideMembers() {
      this.membersModalVisible = false
    },
    getMembers(reportId) {
      if (this.membersLoading) {
        return
      }
      this.membersLoading = true
      getServers(reportId)
        .then(res => {
          this.membersList = res.resData
        })
        .catch(err => {
          console.log(err)
        })
        .finally(() => {
          this.membersLoading = false
        })
    },


    loadProjectDetail(projectId) {
      getProjectDetail(projectId)
        .then(res => {
          this.projectInfo = res.resData
        })
    },
    loadProjectReports(projectId) {
      getProjectReports(projectId)
        .then(res => {
          this.records = res.resData
        })
    },
    loadBusinessList(projectId){
      getBusinessList(projectId).then(res => {
        this.businessList = res.resData
      })
    },
    loadProjectApplicant(projectId) {
      getProjectApplicant(projectId)
        .then(res => {
          this.applicants = res.resData
        })
    },
    handleClickMenu({ item, key, keyPath }) {
      this.currentMenuKey = key
    },
    handleDetail(info) {
      if (this.loadingMembersDetail) {
        return
      }
      this.rowApplicant = {}
      this.$refs.applicantModal.show()
      this.loadingMembersDetail = true
      getProjectApplicantTrace(this.projectId, info.individualUserId).then(res => {
        this.rowApplicant = Object.assign(info, {
          trace: res.resData
        })
        this.loadingMembersDetail = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.warp {
  display: flex;
  width: 100%;
  position: relative;
  .left {
    position: fixed;
  }
  .right {
    overflow: hidden;
    min-height: 60vh;
    margin-left: 100px;
    flex-grow: 1;
    .top {
      margin-bottom: 20px;
      padding: 0 20px;
    }
    .title {
      font-size: 14px;
      margin-top: 14px;
      padding: 0 20px;
    }
  }
}
</style>
